<!--
 * @Description:
 * @Author: 月间
 * @Date: 2025-03-30 16:51:22
 * @LastEditTime: 2025-03-30 19:22:10
 * @LastEditors:
-->
<script setup lang="ts">
import { ref } from 'vue';
import type { Ref } from 'vue';
import { NButton, NPopconfirm } from 'naive-ui';
// import { useBoolean } from '@sa/hooks';
import { fetchGetOnlineConsumers } from '@/service/api/system-manage';
import { useAppStore } from '@/store/modules/app';
import { useTable, useTableOperate } from '@/hooks/common/table';
import { $t } from '@/locales';
import ConsumerSearch from './modules/consumer-search.vue';
const appStore = useAppStore();

const {
  columns,
  columnChecks,
  data,
  loading,
  getData,
  getDataByPage,
  mobilePagination,
  searchParams,
  resetSearchParams
} = useTable({
  apiFn: fetchGetOnlineConsumers,
  apiParams: {
    current: 1,
    size: 10
  },
  columns: () => [
    {
      type: 'selection',
      align: 'center',
      width: 48,
      fixed: 'left'
    },
    {
      title: '队列名称',
      key: 'queueName',
      align: 'center',
      width: 140,
      fixed: 'left'
    },
    {
      title: '消费函数',
      key: 'consumingFunction',
      align: 'center',
      width: 120,
      fixed: 'left'
    },
    {
      title: '计算机名称',
      key: 'computerName',
      align: 'center',
      width: 150,
      fixed: 'left'
    },
    {
      title: '计算机IP',
      key: 'computerIp',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 86
    },
    {
      title: '进程ID',
      key: 'processId',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 80
    },
    {
      title: '启动时间',
      key: 'startDatetimeStr',
      align: 'center',
      width: 200
    },
    {
      title: '心跳时间',
      key: 'hearbeatDatetimeStr',
      align: 'center',
      ellipsis: { tooltip: true },
      width: 180
    },
    {
      title: '消费者ID',
      key: 'consumerId',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 120
    },
    {
      title: '累计运行完成次数',
      key: 'totalConsumeCountFromStart',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 100
    },
    {
      title: '累计运行失败次数',
      key: 'totalConsumeCountFromStartFail',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 100
    },
    {
      title: '最后10秒执行完成次数',
      key: 'lastXSExecuteCount',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 100
    },
    {
      title: '最后10秒执行失败次数',
      key: 'lastXSExecuteCountFail',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 100
    },
    {
      title: '最后10秒平均函数执行时间',
      key: 'avarageFunctionSpendTimeFromStart',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 100
    },
    {
      title: '累计函数平均运行耗时',
      key: 'lastXSAvarageFunctionSpendTime',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 120
    },
    {
      title: '代码文件名',
      key: 'codeFilename',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 120
    },
    {
      title: '消费者UUID',
      key: 'consumerUuid',
      align: 'center',
      ellipsis: { tooltip: true },
      minWidth: 120
    }
  ]
});
const { checkedRowKeys } = useTableOperate(data, getData);
</script>

<template>
  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <ConsumerSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage"></ConsumerSearch>
    <NCard title="消费者列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
      <template #header-extra>
        <TableHeaderOperation v-model:columns="columnChecks" :loading="loading" @refresh="getData">
          <template #prefix></template>
        </TableHeaderOperation>
      </template>
      <NDataTable
        v-model:checked-row-keys="checkedRowKeys"
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="2500"
        :loading="loading"
        remote
        :row-key="row => row.consumerUuid"
        :pagination="mobilePagination"
        class="sm:h-full"
      />
    </NCard>
  </div>
</template>
